<template>
	<div :class="classNames">
		<template v-if="items.length > 0">
			<div class="app-control-dataview-content">
				<template v-for="(item, index) in items" :key="index">
					<div class="app-control-dataview-content__group" v-if="item && item.isGroupItem">
						<div :class="getDataViewItemClassNames(item)" @click.stop="handleExpaned(item)">
							<div class="app-dataview-group-item-title">
								<template v-if="item.isGroupItem">
									<span class="app-dataview-group-item__caption">
										{{ item.srfmajortext }}
									</span>
								</template>
								<template v-if="!item.isGroupItem && hasSlot('default')">
									<slot name="default" :item="item"></slot>
								</template>
								<template v-if="!item.isGroupItem && hasSlot('dataViewGroupIcon')">
									<slot name="dataViewGroupIcon" :item="item"></slot>
								</template>
							</div>
							<div class="app-dataview-group-item-icon">
								<down-outlined v-if="item.isGroupItem && item.isExpand" />
								<up-outlined v-if="item.isGroupItem && !item.isExpand" />
							</div>
						</div>
						<div class="app-dataview-group__children" v-if="item && item.isGroupItem && item.isExpand">
							<DataViewItem v-for="(children, _index) in item.children" :key="_index" :style="{
								width: cardOpts.width > 0 ? `${cardOpts.width}px` : false,
								height: cardOpts.height > 0 ? `${cardOpts.height}px` : false,
							}" :item="children" :class="getDataViewItemClassNames(children)" @click="handleClick(children, $event)"
								@dblclick="handleDbClick(children, $event)">
								<span v-if="!hasSlot('default')" class="data-view-item__title">{{
									children.srfmajortext
								}}</span>
								<template v-if="hasSlot('default')" #default>
									<slot name="default" :item="children"></slot>
								</template>
								<template #dataViewItemTitle>
									<slot v-if="hasSlot('dataViewItemTitle')" name="dataViewItemTitle"></slot>
								</template>
								<template #dataViewItemActions>
									<slot v-if="hasSlot('dataViewItemActions')" name="dataViewItemActions"></slot>
									<div v-else class="app-data-item-actions">
										<template v-for="(action, index1) in children.uIActionGroup" :key="index1">
											<AppButton type="link" v-show="action.visible" :disabled="action.disabled"
												@click.stop="(event: MouseEvent) => handleActionClick(event, action, children)">
												<AppIconText :iconClass="action.showIcon && action.iconClass"
													:imgPath="action.showIcon && action.imgPath"
													:text="action.showCaption && action.caption" />
											</AppButton>
										</template>
									</div>
								</template>
								<template #dataViewItemCover>
									<slot v-if="hasSlot('dataViewItemCover')" name="dataViewItemCover"></slot>
								</template>
								<template #dataViewItemCustomTab>
									<slot v-if="hasSlot('dataViewItemCustomTab')" name="dataViewItemCustomTab"></slot>
								</template>
								<template #dataViewItemExtra>
									<slot v-if="hasSlot('dataViewItemExtra')" name="dataViewItemExtra"></slot>
								</template>
								<template #dataViewItemTabBarExtraContent>
									<slot v-if="hasSlot('dataViewItemTabBarExtraContent')"
										name="dataViewItemTabBarExtraContent"></slot>
								</template>
							</DataViewItem>
						</div>
					</div>
					<template v-else>
						<DataViewItem :key="index" :style="{
							width: cardOpts.width > 0 ? `${cardOpts.width}px` : false,
							height: cardOpts.height > 0 ? `${cardOpts.height}px` : false,
						}" :item="item" :class="getDataViewItemClassNames(item)" @click="handleClick(item, $event)"
							@dblclick="handleDbClick(item, $event)">
							<span v-if="!hasSlot('default')" class="data-view-item__title">{{
								item.srfmajortext
							}}</span>
							<template v-if="hasSlot('default')" #default>
								<slot name="default" :item="item"></slot>
							</template>
							<template #dataViewItemTitle>
								<slot v-if="hasSlot('dataViewItemTitle')" name="dataViewItemTitle"></slot>
							</template>
							<template #dataViewItemActions>
								<slot v-if="hasSlot('dataViewItemActions')" name="dataViewItemActions"></slot>
								<div v-else class="app-data-item-actions">
									<template v-for="(action, index1) in item.uIActionGroup" :key="index1">
										<AppButton type="link" v-show="action.visible" :disabled="action.disabled"
											@click.stop="(event: MouseEvent) => handleActionClick(event, action, item)">
											<AppIconText :iconClass="action.showIcon && action.iconClass"
												:imgPath="action.showIcon && action.imgPath"
												:text="action.showCaption && action.caption" />
										</AppButton>
									</template>
								</div>
							</template>
							<template #dataViewItemCover>
								<slot v-if="hasSlot('dataViewItemCover')" name="dataViewItemCover"></slot>
							</template>
							<template #dataViewItemCustomTab>
								<slot v-if="hasSlot('dataViewItemCustomTab')" name="dataViewItemCustomTab"></slot>
							</template>
							<template #dataViewItemExtra>
								<slot v-if="hasSlot('dataViewItemExtra')" name="dataViewItemExtra"></slot>
							</template>
							<template #dataViewItemTabBarExtraContent>
								<slot v-if="hasSlot('dataViewItemTabBarExtraContent')"
									name="dataViewItemTabBarExtraContent"></slot>
							</template>
						</DataViewItem>
					</template>
				</template>
			</div>
			<template v-if="loadMore && items.length > 0 && items.length < totalRecord">
				<div class="load-more">
					<AppButton type="link" @click.stop="handleLoadMore">{{ $t("widget.dataview.loadmore","加载更多") }}
					</AppButton>
				</div>
			</template>
		</template>
		<template v-else>
			<AppEmptyDataTip :emptyText="$t(emptyTextPSLanguageRes, emptyText)"></AppEmptyDataTip>
		</template>
	</div>
</template>
<script setup lang="ts">
import { DataViewProps, IDataViewItem } from './data-view';
import DataViewItem from './components/data-view-item.vue';
import AppEmptyDataTip from '@/components/common/empty-data-tip/src/empty-data-tip.vue';
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
import { IParam } from '@/core';
const props = defineProps(DataViewProps);

const emit = defineEmits<{
	(name: 'selectionChange', selections: IParam[]): void;
	(name: 'itemClick', item: IDataViewItem, event: MouseEvent): void;
	(name: 'itemDbClick', item: IDataViewItem, event: MouseEvent): void;
	(
		name: 'itemActionClick',
		logic: IParam,
		data: IParam,
		event: MouseEvent
	): void;
	(name: 'loadMore'): void;
}>();

const classNames = computed(() => {
	return {
		'app-control-dataview__empty': props.items.length === 0,
		'app-control-list__pagination': props.loadMore,
	};
});

//  获取显示文本
const getLocale = computed(() => {
	return {
		emptyText:
			App.ts(props.emptyTextPSLanguageRes, props.emptyText) || App.ts("widget.dataview.nodata", '暂无数据'),
	};
});

const getSelected = (item: IDataViewItem): boolean => {
	return (
		props.selections.findIndex((s: IParam) => s.srfkey === item.srfkey) !== -1
	);
};

//  获取卡片视图部件项类名
const getDataViewItemClassNames = (item: IDataViewItem) => {
	return {
		'app-dataview-item': !item.isGroupItem,
		'app-dataview-item--selected': getSelected(item),
		'app-dataview-group-item': item.isGroupItem,
		'app-dataview-group-item--expand': item.isExpand,
	};
};

//  是否有该插槽
const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};

const handleClick = (item: IDataViewItem, event: MouseEvent) => {
	//  其他行抛出点击事件
	emit('itemClick', item, event);
};

const handleDbClick = (item: IDataViewItem, event: MouseEvent) => {
	emit('itemDbClick', item, event);
};

const handleLoadMore = (e: MouseEvent) => {
	emit('loadMore');
};

const handleActionClick = (event: MouseEvent, logic: IParam, data: IParam) => {
	event.stopPropagation();
	event.preventDefault();
	emit('itemActionClick', logic, data, event);
};

const handleExpaned = (item: IParam) => {
	item.isExpand = !item.isExpand;
};
</script>
